<template>
  <div>
    <NavBar>
      <template #left>
        <img
          @click="handleBackIconClick"
          src="/images/icon/back.svg"
          alt=""
        />
        添加朋友
      </template>
    </NavBar>
    <div class="searchBox">
      <weui-search-bar v-model="friend"></weui-search-bar>
      <!-- <div class="myNum">
        <div class="my">我的微信号：一支梨花</div>
        <img src="/images/icon/qrcode.png" alt="" />
      </div> -->
      <weui-button @click="handleAdd" :block="true">
        添加朋友
      </weui-button>
    </div>
    <div>
      <Cell>
        <template #left>
          <img
            src="/images/icon/radar.svg"
            alt=""
            class="mediate"
          />
        </template>
        <div class="list">
          <span>雷达加朋友</span>
          <span>添加身边的朋友</span>
        </div>
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        <template #left>
          <img
            src="/images/icon/jianqun.svg"
            alt=""
            class="mediate"
          />
        </template>
        <div class="list">
          <span>面对面建群</span>
          <span>与身边的朋友进入统一个群聊</span>
        </div>
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        <template #left>
          <img
            src="/images/icon/scanscan.svg"
            alt=""
            class="mediate"
          />
        </template>
        <div class="list">
          <span>扫一扫</span>
          <span>扫描二维码名片</span>
        </div>
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        <template #left>
          <img
            src="/images/icon/shouji.svg"
            alt=""
            class="mediate"
          />
        </template>
        <div class="list">
          <span>手机联系人</span>
          <span>添加或邀请通讯录中的朋友</span>
        </div>
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        <template #left>
          <img
            src="/images/icon/gzh.svg"
            alt=""
            class="mediate"
          />
        </template>
        <div class="list">
          <span>公众号</span>
          <span>获取更多资讯和服务</span>
        </div>
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        <template #left>
          <img
            src="/images/icon/qiye.svg"
            alt=""
            class="mediate"
          />
        </template>
        <div class="list">
          <span>企业微信联系人</span>
          <span>通过手机搜索企业微信用户</span>
        </div>
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </div>
  </div>
</template>

<script>
import NavBar from "src/components/NavBar.vue"
import Cell from "src/components/Cell.vue"
import CellGroup from "src/components/CellGroup.vue"
export default {
  components: {
    NavBar,
    Cell,
    CellGroup,
  },
  data: () => ({
    friend: "",
  }),
  methods: {
    handleBackIconClick() {
      this.$router.go(-1)
    },
    async handleAdd() {
      const res = await this.$axios.post("/user/add", {
        currentUserId: this.$global.state.userId,
        targetUsername: this.friend,
      })
      if (res) {
        this.$toast.success(`添加${this.friend}成功`)
      } else {
        this.$toast.warn(`添加${this.friend}失败`)
      }
      console.log(res, this.$global.state.userId)
    },
  },
}
</script>

<style>
.searchBox {
  width: 100%;
  margin-top: 70px;
  position: relative;
}
.search {
  width: 354px;
  height: 31px;
  background-color: #ffffff;
  border-radius: 5px;
  position: absolute;
  top: 12px;
  left: 10px;
}
.search img {
  width: 16px;
  height: 16px;
  float: right;
  margin: 7px 0;
}
.search input {
  width: 222px;
  height: 27px;
  margin: 2px 2px 0 10px;
  border: none;
  outline: none;
  font-size: 15px;
  color: #a1a1a1;
  float: right;
}
.myNum {
  width: 177px;
  height: 17px;
  color: #868686;
  position: absolute;
  top: 57px;
  left: 109px;
  display: flex;
}
.my {
  display: inline-block;
  font-size: 13px;
}
.myNum img {
  width: 18px;
  height: 18px;
  margin: auto 10px;
}
.list {
  display: flex;
  flex-direction: column;
}
.list span:first-child {
  height: 18px;
  font-size: 16px;
  color: #000000;
}
.list span:last-child {
  font-size: 11px;
  color: #868686;
  margin-top: 5px;
}
.mediate {
  margin-top: 10px;
}
</style>
